<template>
	<view class="full-page flex-vbox">
		<uni-drawer :visible="drawerVisible" @close="toggleDrawer(false)">
			<drawer></drawer>
		</uni-drawer>
		<cu-header>
			<template v-slot:action-left>
				<i class="music-icon music-icon-menu" @click="toggleDrawer(true)"></i>
			</template>
			<template v-slot:center-action>
				<view class="center-action flex-box flex-valign">
					<navigator class="link-btn" :class="{active: pageIndex == 0}" @click="pageIndex = 0">我的</navigator>
					<navigator class="link-btn" :class="{active: pageIndex == 1}" @click="pageIndex = 1">发现</navigator>
					<navigator class="link-btn" :class="{active: pageIndex == 2}" @click="pageIndex = 2">云村</navigator>
					<navigator class="link-btn" :class="{active: pageIndex == 3}" @click="pageIndex = 3">视频</navigator>
				</view>
			</template>
			<template v-slot:action-right>
				<i class="music-icon music-icon-search"></i>
			</template>
		</cu-header>
		<view class="content flex-item" :style="{'padding-bottom': playBarHeight + 'px'}">
			<swiper :current="pageIndex" @change="onChangePage">
				<swiper-item>
					<user ref="user" @scroll="listenScroll"></user>
				</swiper-item>
				<swiper-item>
					<found ref="found" @scroll="listenScroll"></found>
				</swiper-item>
				<swiper-item>
					<social ref="social" @scroll="listenScroll"></social>
				</swiper-item>
				<swiper-item>
					<mv ref="mv" @scroll="listenScroll"></mv>
				</swiper-item>
			</swiper>
			<play-bar @mounted="playBarMounted"></play-bar>
		</view>
	</view>
</template>

<script>
	let playTicker;
	let enablePDR = true;// 用于打开drawer时暂存当前显示组件对应enablePDRObj的值，以便关闭drawer时还原页面开启或禁用下拉刷新到原来的状态
	let enablePDRObj = {
		user: true,
		found: true,
		social: true,
		mv: true
	};
	import cuHeader from '../../components/cu-header/cu-header.vue'
	import user from './components/user.vue'
	import found from './components/found.vue'
	import social from './components/social.vue'
	import mv from './components/mv.vue'
	import uniDrawer from '../../components/uni-drawer/uni-drawer.vue'
	import drawer from './components/drawer.vue'
	import playBar from '@/components/play-bar/play-bar.vue'
	import mixin from '@/mixins/common.js'
	export default {
		components: {
			cuHeader,
			user,
			found,
			social,
			mv,
			uniDrawer,
			drawer,
			playBar
		},
		mixins: [mixin],
		data() {
			return {
				pageIndex: 1,
				drawerVisible: false,
				playBarHeight: 0
			}
		},
		methods: {
			curPageRef() {
				switch (this.pageIndex){
					case 0:
						return 'user';
						break;
					case 1:
						return 'found';
						break;
					case 2:
						return 'social';
						break;
					case 3:
						return 'mv';
						break;
					default:
						break;
				}
			},
			toggleDrawer(drawerVisible) {
				this.drawerVisible = drawerVisible;
				// #ifdef APP-PLUS
				if(drawerVisible){// 打开drawer暂存enablePDR，并禁用下拉刷新
					enablePDR = enablePDRObj[this.curPageRef()];
					this.enablePullDownRefresh(false);	
				}
				else{// 关闭时还原
					this.enablePullDownRefresh(enablePDR);					
				}
				// #endif
			},
			listenScroll(scrollTop) {
				//#ifdef APP-PLUS
				let enablePullDownRefresh = enablePDRObj[this.curPageRef()];
				if(scrollTop > 0){
					if(enablePullDownRefresh == false) return;
					enablePDRObj[this.curPageRef()] = false;
					this.enablePullDownRefresh(false);
				}
				else{
					if(enablePullDownRefresh == true) return;
					enablePDRObj[this.curPageRef()] = true;
					this.enablePullDownRefresh(true);
				}
				//#endif
			},
			onChangePage(e) {
				this.pageIndex = e.detail.current;
				this.enablePullDownRefresh(enablePDRObj[this.curPageRef()]);
			},
			loadData() {
				switch (this.pageIndex){
					case 1:
						this.$refs.found.loadData();
						break;
					default:
						break;
				}
			},
			playBarMounted(height) {
				this.playBarHeight = height;
			}
		},
		mounted() {					
			uni.startPullDownRefresh()
		},
		onPullDownRefresh() {
			this.loadData();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onBackPress() {
			if(this.drawerVisible){// 打开drawer的情况下点击返回键则关闭drawer并避免返回键的默认行为
				this.toggleDrawer(false);
				return true;
			}
			else{
				return false;
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.center-action{
		justify-content: center;
		padding-top: 30rpx;
	}
	.center-action navigator{
		padding: 0 16rpx;
		font-size: 24rpx;
		color: #E7E7E7;
	}
	.center-action navigator.active{
		font-size: 30rpx;
		color: #FFFFFF;
	}
	swiper, swiper-item{
		height: 100%;
	}
	.content{
		position: relative;
	}
</style>